<template>
  <div>
      <!-- v-for作用：
        相当于forEach循环遍历指定数组
        :key 只能是字符串或数字
        -->
    <h1>v-for用法</h1>
    <!-- 1.循环数组 -->
    <ul>
      <li v-for="(item, index) in list" :key="item">{{ index }}-{{ item }}</li>
    </ul>

    <!-- 2.循环数字 -> v-for="(数字(从1开始), 索引) in 数字" -->
      <ul>
        <li v-for="(num,index) in 3" :key="index">{{index}}:{{num}}</li>
      </ul>
      
    <!-- 3.循环对象 -> v-for="(键, 值) in 对象" -->
    <ul>
      <li v-for="(value, key) in obj" :key="key">
        {{key}}:{{value}}
      </li>
    </ul>
  </div>
</template>

<script>
/**
 * * 语法
 * v-for="(值, 索引) in 目标结构"
 * v-for="值 in 目标结构"
 * 目标结构:
 * 可以遍历数组 / 对象 / 数字
 */
export default {
  data() {
    return {
      list: ["春", "夏", "秋", "冬"],
      obj: {
        name: "小波",
        age: 13,
      },
    };
  },
};
</script>

<style>
</style>